﻿@model CRM.Op.Models.ClueListViewModel
@{
    ViewBag.Title = "线索列表";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<section class="content-header">
    <h1>
        线索管理
        <small></small>
    </h1>
    <ol class="breadcrumb">
        <li>
            <a href="#"><i class="fa fa-dashboard"></i>主页</a>
        </li>
        <li class="active">线索管理</li>
    </ol>
</section>
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header">
                    <div class="nav-tabs-custom">
                        <ul id="navOrderStatus" class="nav nav-tabs">
                            <li id="OrderStatus2" class="active">
                                <a href="#OrderContainer" data-toggle="tab" class="btn btn-app" style="height:40px;">分配线索<span id="bradge1" class="badge bg-red"></span></a>
                            </li>
                            @if (Model.Auth.ClueUploadAuth == 1)
                            {
                            <li id="OrderStatus1" class="">
                                <a href="#OrderContainer" data-toggle="tab" class="btn btn-app" style="height:40px;">导入线索</a>
                            </li>
                            }
                        </ul>
                    </div>
                    <div>
                        <form id="search-form " class="form-inline">
                            <div class="form-group">
                                <label>车牌号</label>
                                <input type="text" class="form-control" style="width:200px;" maxlength="50" name="PlateNo" autocomplete="off" />
                            </div>
                            <div class="form-group">
                                <label>坐席</label>
                                <select class="form-control" id="UserID" name="UserID">
                                    <option value="-1">请选择坐席</option>
                                    @foreach (var item in Model.CompanyUsers)
                                    {
                                        <option value="@item.UserID">@item.UserName</option>
                                    }
                                </select>
                            </div>
                            <div class="form-group uploadHide">
                                <label>保险公司</label>
                                <input type="text" class="form-control" style="width:200px;" maxlength="50" name="InsuranceCompany" autocomplete="off" />
                            </div>
                            <div class="form-group uploadHide">
                                <label>品牌</label>
                                <select id="selBrand" name="BrandID" class="form-control">
                                    <option value="0">全部</option>
                                </select>
                            </div>
                            <div class="form-group uploadHide">
                                <label>车型</label>
                                <select id="selModel" name="ModelID" class="form-control">
                                    <option value="0">全部</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>线索创建时间</label>
                                <input type="text" class="form-control" style="width:200px;" name="BCreateDate" id="BCreateDate" autocomplete="off" />
                                -
                                <input type="text" class="form-control" style="width:200px;" name="ECreateDate" id="ECreateDate" autocomplete="off" />
                            </div>
                            <div class="form-group uploadHide">
                                <label>保险到期时间</label>
                                <input type="text" class="form-control" style="width:200px;" name="BInsureDate" id="BInsureDate" autocomplete="off" />
                                -
                                <input type="text" class="form-control" style="width:200px;" name="EInsureDate" id="EInsureDate" autocomplete="off" />
                            </div>
                            <!--线索来源-->
                            <input type="hidden" id="SourceID" name="SourceID" value="2" />
                            <div class="form-group">
                                <button type="button" class="btn btn-success" id="btnSearch">查找</button>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body table-responsive no-padding">
                    <div class="box-header">
                        <ul class="list-unstyled list-inline">
                            <li>
                                <input type="button" class="btn btn-success " id="batchUser" value="批量分配坐席" />
                            </li>
                            <li>
                                <div id="btnUpload" class="dm-uploader" style="display:none;">
                                    <div role="button" class="btn btn-primary ">
                                        导入
                                        <input type="file" title="Click to add Files">
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div id="tplDown" style="display:none;">
                                    <div>
                                        <a class="btn btn-primary " href="@Model.ClueExcelTplHref">下载模版</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="box-body table-responsive no-padding">
                        <table id="table"></table>
                    </div>
                </div>
                <!-- /.box -->
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal-users" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title">分配坐席</h4>
                </div>
                <div id="modal-body" class="modal-body">
                    <div class="form-group">
                        <label for="commentName">请选择坐席</label>
                        <select class="form-control" id="selUsers">
                            @foreach (var item in Model.CompanyUsers)
                            {
                                <option value="@item.UserID">@item.UserName</option>
                            }
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="saveUserRela()" data-dismiss="modal">确定分配</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div class="modal fade" id="modal-editType" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title">修改类别</h4>
                </div>
                <div id="modal-body" class="modal-body">
                    <div class="form-group">
                        <label for="commentName">请选择类别</label>
                        <select class="form-control" id="selClueType">
                            <option value="1">出险客户</option>
                            <option value="2">续保客户</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="saveClueType()" data-dismiss="modal">确定分配</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</section>

@section scriptsBottom{
    <script type="text/javascript">
        var selClueId = 0,//单独分配的坐席ID
          assUrl = '@Url.Action("AssignUsers", "Clue")',
          brandListUrl = '@Url.Action("GetBrandList", "Public")',
          serialListUrl = '@Url.Action("GetSerialList", "Public")',
          uploadUrl = '@Url.Action("UploadExcel", "Clue")',
          clueListUrl = '@Url.Action("GetClueList", "Clue")',
          editTypeUrl = '@Url.Action("EditClueType","Clue")';

        $(document).ready(function () {
            $("#BCreateDate").datepicker({
                language: "zh-CN",
                autoclose: true,//选中之后自动隐藏日期选择框
                format: "yyyy-mm-dd"//日期格式，
            });
            $("#ECreateDate").datepicker({
                language: "zh-CN",
                autoclose: true,//选中之后自动隐藏日期选择框
                format: "yyyy-mm-dd"//日期格式，
            });
            $("#BInsureDate").datepicker({
                language: "zh-CN",
                autoclose: true,//选中之后自动隐藏日期选择框
                format: "yyyy-mm-dd"//日期格式，
            });
            $("#EInsureDate").datepicker({
                language: "zh-CN",
                autoclose: true,//选中之后自动隐藏日期选择框
                format: "yyyy-mm-dd"//日期格式，
            });

            $("#model_btn_yes").click(function () {
                updateVehiclStatus(2);
            });
            $("#model_btn_no").click(function () {
                updateVehiclStatus(3);
            });
            $("#btnSearch").on("click", function () {
                $('#table').bootstrapTable('refresh');
            });
            renderImg();
            binds();
            bindBrand();
            showUpload();
            init();
        });

        //弹窗修改线索类型
        function editType(clueId, type) {
            selClueId = clueId;
            $("#selClueType").val(type);
            $("#modal-editType").modal('show');
        }

        //保存线索类别
        function saveClueType() {
            var selType = $("#selClueType").val();
            var data = {
                "ClueID": selClueId,
                "ClueType": selType
            };
            BMCW.ajax({
                url: editTypeUrl,
                type: "POST",
                data: data,
                success: function (res) {
                    if (res.status == 0) {
                        if (status == 0) {
                            BMCW.alert("保存成功");
                        } else {
                            BMCW.alert("保存失败");
                        }
                        $('#table').bootstrapTable('refresh');
                    } else {
                        BMCW.alert(res.message);
                    }
                }
            });
        }

        //线索来源切换
        function binds() {
            $("#navOrderStatus").delegate("li", "click", function () {
                var source = $(this).attr("id").substring(11);
                $("#SourceID").val(source);
                $('#table').bootstrapTable('refresh');
                showUpload();
            })

            //批量分配点击
            $("#batchUser").on("click", function () {
                var chks = $('#table').bootstrapTable('getSelections');
                if (chks.length < 1) {
                    BMCW.alert("请选择待分配的线索");
                } else {
                    $("#modal-users").modal('show');
                }
            });
        }

        //分配坐席模态框展示
        function user(clueid) {
            selClueId = clueid;
            $("#modal-users").modal('show');
        }

        //分配坐席保存
        function saveUserRela() {
            var userId = $("#selUsers").val();
            if (!userId || userId < 0) {
                BMCW.alert("请选择坐席");
                return;
            }
            var cluelist = [];
            if (selClueId > 0) {
                cluelist.push(selClueId);

            } else {
                var chks = $('#table').bootstrapTable('getSelections');
                for (var i = 0; i < chks.length; i++) {
                    cluelist.push(chks[i].ClueID);
                }
            }
            selClueId = 0;
            var data = {
                "UserID": userId,
                "ClueIDs": cluelist
            };
            BMCW.ajax({
                url: assUrl,
                type: "POST",
                data: data,
                success: function (res) {
                    if (res.status == 0) {
                        if (status == 0) {
                            BMCW.alert("分配成功");
                        } else {
                            BMCW.alert("分配失败");
                        }
                        $('#table').bootstrapTable('refresh');
                    } else {
                        BMCW.alert(res.message);
                    }
                }
            });
        }

        //初始化
        function init() {
            $('#table').bootstrapTable({
                pagination: true,
                sortable: false,
                method: 'post',
                sidePagination: "server",
                queryParamsType: null,
                pageNumber: 1,
                pageSize: 10,
                pageList: [10, 25, 50],
                minimumCountColumns: 2,
                url: clueListUrl,
                queryParams: function (params) {
                    var query = {
                        PageSize: params.pageSize,
                        PageIndex: params.pageNumber,
                        sortName: params.sortName,
                        sortOrder: params.sortOrder
                    };
                    var fdata = $("#search-form").serializeJson();
                    return $.extend(query, fdata);
                },
                columns: [{
                    checkbox: true,
                    formatter: function (value, row, index) {
                        if (row.UploadStatus == 1) {
                            return {
                                disabled: false
                            }
                        } else {
                            return {
                                disabled: true
                            }
                        }
                    }
                },
               {
                   width:20,
                   field: 'ClueID',
                   title: 'ID'
               }, {
                   width: 60,
                   field: 'UserName',
                   title: '客户名称'
               }, {
                   width: 80,
                   field: 'PlateNo',
                   title: '车牌号'
               }, {
                   width: 100,
                   field: 'Brand',
                   title: '车辆信息',
                   formatter: function (value, row, index) {
                        return row.Brand + row.Model;
                    }
               }, {
                    width: 60,
                    field: 'SeatName',
                    title: '分配坐席'
               }, {
                   width: 60,
                    field: 'UploadStatusName',
                    title: '状态'
               }, {
                   width: 100,
                    field: 'InsuranceCompany',
                    title: '保险公司名称'
               }, {
                   width: 100,
                   field: 'EndDate',
                   title: '保险到期时间',
                   formatter: function (value, row, index) {
                        if (row.EndDate == '1900-01-01 00:00:00') {
                            return "";
                        }
                        return row.EndDate;
                    }
               }, {
                   width: 100,
                   field: 'CreatedDate',
                   title: '线索创建时间'
               }, {
                    width: 60,
                    field: 'ClueTypeName',
                    title: '线索类型'
                },  {
                    title: "操作",
                    align: 'center',
                    valign: 'middle',
                    width: 160, // 定义列的宽度，单位为像素px
                    formatter: function (value, row, index) {
                        var fmt = ' <button type="button" class="btn btn-info btn-xs" onclick="editType('+ row.ClueID +','+ row.ClueType +')">修改类型</button>';
                        if (row.UploadStatus == 1)
                        {
                            fmt += '<button type="button" class="btn btn-info btn-xs" onclick="user(' + row.ClueID + ')">分配坐席</button>';
                            fmt += ' <button type="button" class="btn btn-success btn-xs" onclick="callNum(' + row.ClueID + ',' + row.CompanyID + ')">呼叫</button>';
                        }
                        return fmt;
                    }
                }]
            });
        }

        //列表刷新后判断是否展示上传状态
        function showUpload(){
            var source = $("#SourceID").val();
            var $table = $('#table');
            if (source == "1") {
                $("#btnUpload").show();  //上传按钮
                $("#tplDown").show();  //下载模板按钮
                $table.bootstrapTable('showColumn', 'UploadStatusName');
                $table.bootstrapTable('hideColumn', 'UserName');
                $table.bootstrapTable('hideColumn', 'Brand');
                $table.bootstrapTable('hideColumn', 'InsuranceCompany');
                $table.bootstrapTable('hideColumn', 'EndDate');
                $(".uploadHide").hide();
            } else {
                $("#btnUpload").hide();
                $("#tplDown").hide();
                $table.bootstrapTable('hideColumn', 'UploadStatusName');
                $table.bootstrapTable('showColumn', 'UserName');
                $table.bootstrapTable('showColumn', 'Brand');
                $table.bootstrapTable('showColumn', 'InsuranceCompany');
                $table.bootstrapTable('showColumn', 'EndDate');
                $(".uploadHide").show();
            }
        }

         //绑定车款
        function bindBrand()
        {
            BMCW.ajax({
                url: brandListUrl,
                type: "GET",
                success: function (o) {
                    if (o.length > 0) {
                        for (var i = 0; i < o.length; i++) {
                            $("#selBrand").append('<option value=' + o[i].BrandID + '>' + o[i].BrandName + '</option>');
                        }
                    } else {
                        BMCW.alert(o.message);
                    }
                }
            });

            $("#selBrand").change(function () {
                var bid = $(this).val();
                if (bid > 0) {
                    bindModel(bid);
                } else {
                    $("#selModel").empty();
                    $("#selModel").append('<option value=0>全部</option>');
                }
            })
        }

        //绑定车型
        function bindModel(bid) {
            $("#selModel").empty();
            $("#selModel").append('<option value=0>全部</option>');
            BMCW.ajax({
                url: serialListUrl+'?brandId=' + bid,
                type: "GET",
                success: function (o) {
                    if (o.length > 0) {
                        for (var i = 0; i < o.length; i++) {
                            $("#selModel").append('<option value=' + o[i].SerialID + '>' + o[i].SerialName + '</option>');
                        }

                    } else {
                        BMCW.alert(o.message);
                    }
                }
            });
        }

         //显示上传
        function renderImg() {
            $('#btnUpload').dmUploader({ //
                url: uploadUrl,
                maxFileSize: 3000000, // 3 Megs max
                multiple: false,
                extFilter: ['xls', 'xlsx'],
                onUploadSuccess: function (id, response) {
                    if (response.status==0) {
                        BMCW.alert(response.data);
                    } else {
                        BMCW.alert(response.message);
                    }
                }
            });
        }

        function callNum(bid,ccid) {
            layer.open({
                type: 2,
                title: '外呼中',
                shadeClose: true,
                shade: 0.3,
                area: ['720px', '130px'],
                content: '@Url.Action("MakeCall", "Clue")'+'?clueId='+bid+'&companyId='+ccid //iframe的url
            });
            return false;
        }
    </script>
}
